import React from 'react';
import Table from 'antd/table';
import Icon from 'antd/icon';
import Button from 'antd/button';

import {getData} from '../utils/db';
import routes from './../routes'
import { Route, Redirect, Link } from 'react-router';

const columns = [{
  title: 'name',
  dataIndex: 'name',
  key: 'name',
  width: 120,
  render: (text) => <Link to={{pathname: '/',query:{text}}}>{text}</Link>,
  sorter: (a, b) => a.name.length - b.name.length,
}, {
  title: 'x',
  dataIndex: 'x',
  key: 'x',
  width: 120
}, {
  title: 'y',
  dataIndex: 'y',
  key: 'y',
  width: 120
}, {
  title: 'direction',
  dataIndex: 'direction',
  key: 'direction',
  width: 120
}, {
  title: 'text',
  dataIndex: 'text',
  key: 'text',
  width: 120
}];




export default class Listing extends React.Component {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  constructor(props) {
    super(props);
    //
    this.start = this.start.bind(this);
    this.onSelectChange = this.onSelectChange.bind(this);
    //this.handleClick = this.handleClick.bind(this);
    //
    this.state = {
      selectedRowKeys: [],  // 这里配置默认勾选列
      loading: false,
      tables:getData(),
    };
    var a= this.props.pathname;
  }

  start() {
    this.setState({loading: true});
    // 模拟 ajax 请求，完成后清空
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);

  }

  onSelectChange(selectedRowKeys) {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({selectedRowKeys});

  }

  //handleClick(){
  //  var abox = [];
  //  var a = document.getElementsByClassName("uName");
  //  for(var i=0;i<a.length;i++){
  //    var c = a[i].textContent;
  //    abox[abox.length]= c;
  //    console.log(abox);
  //  }
  //  //this.context.router.push({pathname: value});
  //  //<Route path="listing" component={listing}>
  //  //  ＜Redirect from="listing" to="/" />
  //  //</Route>
  //}

  render() {
    const {props} = this;
    ////const routes = this.props.routes;
    //const { content, location, routes } = props;
    //var route_paths = _.map(routes.slice(0, -1), function(route, idx){return route.path}),
    //    route_paths = route_paths.length === 1 && route_paths[0] === '/' ? [] : route_paths,
    //    route_path = route_paths.join('');

    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      //onclick: this.handleClick(),
    };
    const hasSelected = selectedRowKeys.length > 0;

    const data = [];
    const{ tables } = this.state;
    for (var i = 0; i < tables.length; i++) {
      data.push({
        key: i,
        name: tables[i].assigned,
        x: tables[i].x,
        y: tables[i].y,
        direction:tables[i].direction,
        text:tables[i].text,
      });
    }

    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" onClick={this.start}
                  disabled={!hasSelected} loading={loading}>操作</Button>
          <span style={{ marginLeft: 8 }}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} scroll={{ y: 520 }}/>
      </div>
    );
  }
};
